<template>
  <div class="left-container">
    <h4>我是子模块的num数据: {{ num }}</h4>
    <h3>Left 组件 --- 是否全选: {{ $store.getters.isAll }}</h3>
    <hr />

    <p>count 值:{{ count }} --- {{ name }}</p>
    <button @click="btn" class="btn btn-primary">+1</button>
    <button @click="test" class="btn btn-primary">调用子模块的test函数</button>
  </div>
</template>

<script>
// 1. 按需导入 mapState
import { mapState, mapMutations } from "vuex";

export default {
  name: "Left",
  computed: {
    // 2. 调用 mapState 并将结果展开放入计算属性中
    // 多了一个 count 计算属性
    ...mapState(["count", "name"]),

    // 如果是映射子模块的数据, mapState 需要传 2 个参数
    // 参数1: 子模块注册的名称
    // 参数2: 要映射的数据
    ...mapState("count", ["num"]),
  },
  methods: {
    btn() {
      this.$store.commit("add", { num: 10 });
    },

    ...mapMutations("count", ["test"]),
  },
};
</script>

<style>
</style>
